<template>
    <div>
  <el-table
    v-loading="loading"   
      :data="pageTicket"  
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"       
        >
      </el-table-column>
      <el-table-column
        prop="login"
        label="用户名"
       >
      </el-table-column>
      <el-table-column
        prop="repos_url"
        label="回传地址">
      </el-table-column>
      <el-table-column
        prop="url"
        label="用户地址">
      </el-table-column>
      <el-table-column
        prop="avatar_url"
        label="头像地址">
      </el-table-column>
	</el-table>
<!--分页-->
    <el-row>
      <el-col style="text-align:right" >
        <el-pagination         
           @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </el-col>
    </el-row>
    
</div>
</template>

<script>
import { getGithubData } from '../api'
export default {
   name:'Pagination',
   data() {
    return {        
      total:0,  //总数据条数
      currentpage:1,  //当前所在页默认是第一页
      pagesize:10,  //每页显示多少行数据 默认设置为10
      ticket:[],  //这里是从后端获取的所有数据
      pageTicket:[],//分页后的当前页数据
      isDisplay:true,
      loading:false
    }
   },
   mounted(){
      this.loading=true;
      getGithubData().then((response)=>{
        this.ticket=response.data.items;
          //获取返回记录的总行数
          this.total=response.data.items.length;   
          //获取当前页的数据
          this.getPageInfo();       //在这里调用获取当前页的数据信息方法
          this.loading=false;
          this.$message({message: '数据加载成功!',type: 'success'});
      },error=>{
        console.log(error.message)
      }
      )
   },
   methods:{
    
    // 获取当前页的数据信息
    getPageInfo(){
      //清空pageTicket中的数据
      this.pageTicket=[];
      // 获取当前页的数据
      for(let i=(this.currentpage-1)*this.pagesize;i<this.total;i++){
        //把遍历的数据添加到pageTicket里面
        this.pageTicket.push(this.ticket[i]);
        //判断是否达到一页的要求
        if(this.pageTicket.length===this.pagesize) break;
      }
	},
    //分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size){
      //修改当前每页的数据行数
      this.pagesize=size;
      //数据重新分页
      this.getPageInfo();
    },
    //调整当前的页码
    handleCurrentChange(pageNumber){
      //修改当前的页码
      this.currentpage=pageNumber;
      //数据重新分页
      this.getPageInfo()
  }
   }
}
</script>

<style>

</style>